var ReleasedMaterial = function () {
  var template = /* html */ `
    <div class="released-material" v-loading.fullscreen.lock="loading">
      <div class="handle-form">
        <el-form :inline="true" size="small">
          <!--<el-form-item v-if="hasHandle">
            <el-select clearable filterable style="width:160px" v-model="search.providerName" placeholder="请选择商家">
              <el-option v-for="manufactor in manufactorList" :key="'manufactor_'+manufactor" :value="manufactor"></el-option>
            </el-select>
          </el-form-item>-->
          <el-form-item v-if="classifyData!==null">
            <el-cascader clearable filterable style="width:160px" v-model="search.types" :options="classifyData.treeData" separator="-"
              placeholder="请选择物料分类" :props="typeCascaderProps"></el-cascader>
          </el-form-item>
          <el-form-item>
            <img-search-input style="width:calc(100vw - 400px);min-width:135px"  v-model="search.combinationWhere" placeholder="请输入搜索条件" 
              @img-search="imgSearch"></img-search-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="searchData">搜索</el-button>
            <el-button type="text" @click="getHelp">帮助</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div ref="materialTable" class="released-material-table-div">
        <template v-if="materialList.length>0">
          <card-mode :material-list="materialList" :has-handle="hasHandle" mode-type="released">
          </card-mode>
        </template>
        <div class="no-data" v-else>商城暂无物料数据</div>
      </div>
      <table-pagination v-if="pagination.totalCount!==0" :pagination="pagination" @change="pageChange"></table-pagination>
      <slot name="floor"></slot>
    </div>
  `;

  return {
    props: {
      hasHandle: {
        type: Boolean,
        default: false
      }
    },

    mixins: [
      tablePaginationMixin(100)
    ],

    data: function () {
      var search = {
        providerName: '',
        types: [],
        combinationWhere: ''
      };

      return {
        loading: false,
        search: _.cloneDeep(search),
        oldSearch: _.cloneDeep(search),
        materialList: [],
        manufactorList: [],
        classifyData: null,
        selectMaterial: null,
        typeCascaderProps: {
          value: 'id',
          label: 'name',
          checkStrictly: true
        }
      };
    },

    created: function () {
      this.loading = true;
      var self = this;

      // var hasHandle = this.hasHandle;
      var promiseList = [this.setClassifyData()];
      // if (hasHandle) {
      //   promiseList.push(this.setManufactorList());
      // }

      Promise.all(promiseList).then(function () {
        self.setMaterialList(true).then(function () {
          self.loading = false;
        }).catch(function () {
          self.loading = false;
        });
      }).catch(function () {
        self.loading = false;
      });
    },

    methods: {
      getHelp: function () {
        this.$notify({
          title: '帮助提示',
          dangerouslyUseHTMLString: true,
          message: `<div style="color:#008080;font-weight:bold">拍照上传请单个物料,白色底,搜索相似物料更准确</div>`
        });
      },
      setManufactorList: function () {
        var self = this;
        return ajaxRequest('shoppingMall/getAllShoppingCallCompany').then(function (manufactorList) {
          manufactorList = _.map(manufactorList, 'name');
          self.manufactorList = manufactorList;
          return manufactorList;
        });
      },

      setClassifyData: function () {
        var self = this;
        return ajaxRequest('shoppingMall/getShoppingCallMaterialType').then(function (materialTypeList) {
          var classifyData = new MaterialClassifyModel(materialTypeList);
          self.classifyData = classifyData;
          return classifyData;
        });
      },

      setMaterialList: function (isSearch) {
        if (!isSearch) {
          this.search = _.cloneDeep(this.oldSearch);
        }

        var search = this.search;
        var pagination = this.pagination;
        var pageSize = pagination.pageSize;
        var start = (pagination.currentPage - 1) * pageSize;

        var postData = {
          start: start,
          length: pageSize
        };

        var fields = ['providerName', 'combinationWhere'];
        SysUtil.setPostData(postData, search, fields);

        var types = search.types;
        var typeId = '';
        if (types.length > 0) {
          typeId = types[types.length - 1];
        }
        postData.typeId = typeId;

        var self = this;
        return ajaxRequest('shoppingMall/getAllShoppingCallMaterialData', postData).then(function (res) {
          if (isSearch) {
            self.oldSearch = _.cloneDeep(self.search);
          }

          var materialList = res.returnData;
          var classifyData = self.classifyData;
          materialList = ModuleUtil.getFormatMaterialList(materialList, classifyData, ['contactPhone']);

          self.materialList = materialList;
          self.pagination.totalCount = res.iTotalRecords;
          if (materialList.length > 0) {
            self.$nextTick(function () {
              var materialTable = self.$refs['materialTable'];
              if (materialTable !== undefined) {
                $(materialTable).scrollTop(0);
              }
            });
          }
          return materialList;
        });
      },

      resetMaterialList: function (isSearch) {
        this.loading = true;
        var self = this;
        this.setMaterialList(isSearch).then(function () {
          self.loading = false;
        }).catch(function () {
          self.loading = false;
        });
      },

      resetSearch: function () {
        this.search = _.cloneDeep(this.oldSearch);
      },

      searchData: function () {
        this.pagination.currentPage = 1;
        this.resetMaterialList(true);
      },

      imgSearch: function (url) {
        this.loading = true;
        var self = this;
        ajaxRequest('basicData/queryShopMaterialCompanyByImg', {
          imgUrl: url,
          pn: 1,
          rn: 10
        }, false).then(function (res) {
          self.loading = false;
          var data = res.result;
          var materialData = {};
          for (var i = 0; i < data.length; i++) {
            var obj = data[i];
            var brief = obj.brief;
            brief = JSON.parse(brief);
            var remark = brief.remark;
            remark = JSON.parse(remark);
            if (materialData[remark.id] !== undefined) {
              continue;
            }
            remark.similarity = obj.score;
            materialData[remark.id] = remark;
          }

          self.setMaterialListByIds(materialData);
        }).catch(function () {
          self.loading = false;
        });
      },

      setMaterialListByIds: function (materialData) {
        var ids = _.keys(materialData);
        this.loading = true;
        var self = this;
        ajaxRequest('shoppingMall/getShoppingCallCompanyByIds', {
          idArray: JSON.stringify(ids)
        }).then(function (materialList) {
          var classifyData = self.classifyData;
          materialList = _.orderBy(materialList, [function (material) {
            var obj = materialData[material.id];
            if (obj === undefined) {
              return 0;
            }

            material.showImgUrl = obj.img;
            return obj.similarity;
          }], ['desc']);
          materialList = ModuleUtil.getFormatMaterialList(materialList, classifyData, ['contactPhone']);

          self.materialList = materialList;
          self.pagination.totalCount = 0;

          self.loading = false;
        }).catch(function () {
          self.loading = false;
        });
      },

      pageChange: function () {
        this.resetMaterialList();
      },

      dialogClosed: function () {
        this.selectMaterial = null;
      }
    },

    components: {
      CardMode: CardMode,
      ImgSearchInput: ImgSearchInput
    },

    template: template
  };
}();
